<template>
  <div class="transition-group-test padding-box-100">
    <button @click="add">添加</button>
    <button @click="add2">添加2</button>
    <button @click="remove">移除</button>
    <button @click="shuffle">打乱</button>
    <button @click="removeSome">移除0，2，3</button>
    <button @click="randomDeal">随机添加和删除</button>

    <transition-group class="list-complete-ul" name="list-complete" tag="ul">
      <li v-for="item in list" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
import {reactive} from 'vue';
import {shuffle as _shuffle, random} from 'lodash';

export default {
  name: "TransitionGroupTest",
  setup() {

    let list = [];
    for (let i = 0; i < 4; i++) {
      list.push(Math.random());
    }


    list = reactive(list);

    function getRandomLength() {
      return random(1, list.length - 1);
    }

    function add() {
      list.splice(getRandomLength(), 0, Math.random());
    }

    function add2() {
      add();
      add();
    }

    function remove() {
      list.splice(getRandomLength(), 1);
    }

    function shuffle() {
      list.splice(0, list.length, ..._shuffle(list));
    }

    function removeSome() {
      list.shift();
      list.pop();
      list.pop();
    }

    function randomDeal() {
      list.splice(0, list.length, ...[1, 2, 5, 6]);
    }

    return {
      list,
      add,
      add2,
      remove,
      shuffle,
      removeSome,
      randomDeal,
    }
  }
}
</script>

<style scoped lang="scss">
.transition-group-test {
  .list-complete-ul {
    padding: 0;
    position: relative;
  }

  li {
    background-color: #ccc;
    transition: all 2s;
    margin-top: 10px;
    list-style: none;
    display: inline-block;
    width: 100%;
  }

  .list-complete-enter-from {
    opacity: 0;
    transform: translateX(-30px);
  }

  .list-complete-leave-to {
    opacity: 0;
    transform: scaleY(0);
  }

  .list-complete-leave-active {
    position: absolute;
    left: 0;
  }
}
</style>
